這幾天想來分享幾個設計行動版網頁要素，想必也有許多人開發過行動版網頁，也有許多的手機APP是透過嵌入一個Webview將網頁放到其中，大多數的使用者是感受不出來的，還是有一部分的人可以感受到，畫面不是操作的那麼流暢，這之中各有利弊，今天不是針對webview來做討論，提到一些我開發手機版的網頁會去注意的事項，也歡迎大家再下面留言，給予更好的建議。

Responsive Web Design(RWD) 響應式設計

簡單帶過吧！網路上有許多的文章可以參考，打「RWD、響應式」都可以找的到，簡單來說你可以不用寫不同版本的網頁，同一個網頁透過CSS @media 的屬性來調整使用者看到的內容，下面有一個CSS的範例，當你縮小視窗的時候文字的顏色也會跟著改變

div {
  color: black;
}

@media screen and (min-width: 560px) {
  div {
    color: red;
  }
}

有許多的網站是用響應式的設計，像是中華民國總統府(這個應該夠有份量了吧xDD)，透過手機已及電腦看到的畫面，有不一樣的呈現方式，因為總統府的網頁沒有商業模式，沒有利益上的問題，但在許多的購物網站可以看到，分別設計桌上版及行動版的網站，因為他想要賣廣告，在手機看到的廣告會與電腦上看到的廣告不一樣，因為這樣所以這些網站在設計為護這些頁面上的成本相對來說較高，不同的模式會有不同的設計，我想講到這邊應該可以了解自己想要的是什麼樣的模式吧！
簡單說響應式有幾個優點

• 維護成本低
• 開發成本低
• 相較於APP不需下載上架等手續
• SEO排名較高 (流量、點擊率...等等)
  想研究RWD請洽Google

Layout設計 & Button的大小

對於行動版的Layout尤其重要，如果在小小的螢幕下面塞了滿滿的東西，使用者看起來應該不會覺得很開心吧。
在手機的設計中超過五個的按鈕或是擺放，會造成使用者的操作不順。

(露天拍賣 行動版)

(Android手機 Google搜尋)

POPUP的廣告最最最討厭的就是按鈕小小的，還讓你按到連結的廣告，在設計

各個瀏覽器的支援度

曾經在一個機會下，幫朋友寫了一個行動版的網站，在開發的時候一直沒有出現問題，直到網站正式上線後卻發現很多的內容怎麼都跑版了，而且js怎麼也掛了，這時候才發現在每個手機看到的狀況並不會一樣，或許是手機版本過新，或手機版本過舊...等等，有許多的問題，所以在開發完成後，最好在每個裝置上都測試一遍，不斷的去修正這些問題，當你下次在開發新專案時，你將更注意這些細節。
當然你要怎麼測試，有許多的方法，我的好友在這次鐵人賽有寫了篇關於測試的文章系列Nighwatch，測試就是我們開發的流程，盡量去做到面面俱到的功夫摟。